<template>
  <div class="details-banner">
    <el-header style="font-size: 20px; font-weight: bold">
      <i class="el-icon-info" style="margin-right: 15px"></i>
      <span>报告名称：{{selected_task}}</span>&nbsp;&nbsp;
    </el-header>
    <el-row>
      <el-col :span="12">
        <div class="circle">
          <div class="percentloop">
            <div class="circle-left">
              <div ref="leftcontent"></div>
            </div>
            <div class="circle-right">
              <div ref="rightcontent"></div>
            </div>
            <div class="title">检测完成</div>
          </div>
          <div class="circle-title">
            <h5>扫描提示</h5>
            <p>
              选择下拉菜单中的IP可以查看对应IP的详细报告，检测包含专有的视频物联网脆弱性检测漏洞，支持协议、服务、Web、系统层
            </p>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span>扫描进度</span>
            <router-link to="/detailsTable">
              <el-button style="float: right; padding: 3px 0" type="text"
              >查看进度</el-button
              >
            </router-link>
            <router-view></router-view>
          </div>
          <div class="progress">
            <el-progress :percentage="100"></el-progress>
            <div class="table-text">
              <br>
              <select v-model="selected">
                <option v-for="target in vuln_target_list" :value="target">{{target}}</option>
              </select>&nbsp;&nbsp;
              <el-button
                size="mini"
                @click="read(selected)">读取报告</el-button>
              <br>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="24">
        <el-row :gutter="80" class="mgb20">
          <el-col :span="5" style="margin-left: 100px">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-1">
                <div class="grid-cont-right">
                  <div>扫描时间</div>
                  <div class="grid-num">{{vuln_time}}</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="5">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-2">
                <div class="grid-cont-right">
                  <div>扫描总数</div>
                  <div class="grid-num">{{vuln_target_num}}</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="5">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-3">
                <div class="grid-cont-right">
                  <div>平均耗时</div>
                  <div class="grid-num">{{vuln_every}}</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="5">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-4">
                <div class="grid-cont-right">
                  <div>漏洞条数</div>
                  <div class="grid-num">{{vuln_num}}</div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="15">
        <el-card class="box-card1" shadow="hover">
          <div slot="header" class="clearfix">
            <span>摄像头{{selected}}状态</span>
          </div>
          <div class="list-text">
            <ul style="font-size: 15px; list-style: none">
              <li>
                <el-table :data="tableData_port" border style="width: 100%">
                  <el-table-column label="端口号" >
                    <template slot-scope="scope">
                      <div>
                        <div>{{scope.row.port}}</div>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="组件" >
                    <template slot-scope="scope">
                      <div>
                        <div>{{scope.row.product}}</div>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="状态" >
                    <template slot-scope="scope">
                      <div>
                        <div>{{scope.row.state}}</div>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="功能名称" >
                    <template slot-scope="scope">
                      <div>
                        <div>{{scope.row.name}}</div>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="功能版本" >
                    <template slot-scope="scope">
                      <div>
                        <div>{{scope.row.version}}</div>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="额外信息" >
                    <template slot-scope="scope">
                      <div>
                        <div>{{scope.row.extrainfo}}</div>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="映像匹配" >
                    <template slot-scope="scope">
                      <div>
                        <div>{{scope.row.cpe}}</div>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>

      <el-col :span="15">
        <el-card class="box-card2" shadow="hover">
          <div slot="header" class="clearfix">
            <span>漏洞详情</span>
            <div class="clear: both" />
          </div>
          <div class="progress">
            <el-table
              class="customer-table"
              :data="tableData"
              border
              style="width: 90%"
              :show-header="false"
            >
              <el-table-column label="漏洞信息" width="34">
                <i class="el-icon-warning" style="margin-top: 7px"></i>
              </el-table-column>
              <el-table-column prop="VULN" label="内容">
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      vuln_time : '',
      vuln_every : '',
      vuln_num : '',
      vuln_target_num : '',
      task_list : [],
      vuln_target_list : [],
      percent: 0,
      initDeg: 0,
      timeId: null,
      animationing: false,
      percentNum: 10,
      speed: 2, //速度 取值建议在0-3之间
      tableData: [],
      tableData_port : [],
      selected : '',
      selected_task : '',
    }
  },

  created() {
    this.goRotate(this.transformToDeg(this.percentNum));
  },
  watch: {
    percentNum: function (val) {
      if (this.animationing) return
      this.goRotate(this.transformToDeg(val))
    },
  },
  methods: {
    read(b){
      console.log(b)
      JSON.stringify(b)
      axios.post('http://localhost:5000/read_target',{'task': this.selected_task})
        .then((response) => {
          console.log(response)
        })
        .catch((error) => {
          console.log(error)
        })
      axios.post('http://localhost:5000/read_detail',{'target':b})
        .then((response) => {
          console.log(response)
        })
        .catch((error) => {
          console.log(error)
        })
      this.show_detail()
    },
    show_detail(){
      const url2 = 'http://localhost:5000/vuln_target_result'
      axios.get(url2).then(response => {
        const result = response.data
        this.tableData = result.tableData
      })
      const url3 = 'http://localhost:5000/vuln_target_port_result'
      axios.get(url3).then(response => {
        const result = response.data
        this.tableData_port = result.tableData_port
      })
    },
    transformToDeg(percent) {
      let deg = 0
      if (percent >= 100) {
        deg = 360
      } else {
        deg = parseInt((360 * percent) / 100)
      }
      return deg
    },
    transformToPercent(deg) {
      let percent = 0
      if (deg >= 360) {
        percent = 100
      } else {
        percent = parseInt((100 * deg) / 360)
      }
      return percent
    },
    rotateLeft(deg) {
      // 大于180时，执行的动画
      this.$refs.leftcontent.style.transform = 'rotate(' + (deg - 180) + 'deg)'
    },
    rotateRight(deg) {
      // 小于180时，执行的动画
      this.$refs.rightcontent.style.transform = 'rotate(' + deg + 'deg)'
    },
    goRotate(deg) {
      this.animationing = true
      this.timeId = setInterval(() => {
        if (deg > this.initDeg) {
          // 递增动画
          this.initDeg += Number(this.speed)
          if (this.initDeg >= 180) {
            this.rotateLeft(this.initDeg)
            this.rotateRight(180) // 为避免前后两次传入的百分比转换为度数后的值不为步距的整数，可能出现的左右转动不到位的情况。
          } else {
            this.rotateRight(this.initDeg)
          }
        } else {
          // 递减动画
          this.initDeg -= Number(this.speed)
          if (this.initDeg >= 180) {
            this.rotateLeft(this.initDeg)
          } else {
            this.rotateLeft(180) // 为避免前后两次传入的百分比转换为度数后的值不为步距的整数，可能出现的左右转动不到位的情况。
            this.rotateRight(this.initDeg)
          }
        }
        this.percent = this.transformToPercent(this.initDeg) // 百分比数据滚动动画
        const remainer = Number(deg) - this.initDeg
        if (Math.abs(remainer) < this.speed) {
          this.initDeg += remainer
          if (this.initDeg > 180) {
            this.rotateLeft(deg)
          } else {
            this.rotateRight(deg)
          }
          this.animationFinished()
        }
      }, 10)
    },
    animationFinished() {
      this.percent = this.percentNum // 百分比数据滚动动画
      this.animationing = false
      clearInterval(this.timeId)
      this.$emit('animationFinished') // 动画完成的回调
    },
    format(percentage) {
      return percentage === 100 ? '扫描完成' : `${percentage}%`
    },
  },
  mounted() {
    const url = 'http://localhost:5000/vuln_select_task_result'
    axios.get(url).then(response => {
      const result = response.data
      this.task_list = result.task_list
      this.selected_task = result.vuln_now
      this.vuln_target_list = result.vuln_target_now
    })
    const url2 = 'http://localhost:5000/vuln_task_result'
    axios.get(url2).then(response => {
      const result = response.data
      this.vuln_time = result.vuln_time
      this.vuln_every = result.vuln_every
      this.vuln_num = result.vuln_num
      this.vuln_target_num = result.vuln_target_num
    })
  },
}
</script>

<style>
.details-banner {
  margin: 0.3%;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.el-header {
  background-color: rgba(51, 48, 51, 0.219);
  color: #333;
  line-height: 60px;
}
.circle {
  margin: 30px;
}
.percentloop {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  margin: 10px 30px;
}
.percentloop .circle-left,
.percentloop .circle-right {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-color: #409EFF;
  overflow: hidden;
}
.percentloop .circle-left > div,
.percentloop .circle-right > div {
  width: 100%;
  height: 100%;
  background-color: #87CEFA;
  transform-origin: right center;
}
.percentloop .circle-right {
  left: 50%;
}
.percentloop .circle-right > div {
  transform-origin: left center;
}
.percentloop .title {
  position: absolute;
  top: 7%;
  bottom: 7%;
  left: 7%;
  right: 7%;
  background-color: #fff;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
}
.circle-title {
  float: left;
  margin: -125px 150px;
}
p {
  font-size: 12px;
  word-break: break-all;
  word-wrap: break-word;
}
.progress {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 550px;
  margin: 10px 0px 10px 10px;
}
.customer-table th {
  border: none;
}
.customer-table td,
.customer-table th.is-leaf {
  border: none;
}
.el-table--border,
.el-table--group {
  border: none;
}
.customer-table thead tr th.is-leaf {
  border: 1px solid #ebeef5;
  border-right: none;
}
.customer-table thead tr th:nth-last-of-type(2) {
  border-right: 1px solid #ebeef5;
}
.el-table--border::after,
.el-table--group::after {
  width: 0;
}
.customer-table::before {
  width: 0;
}
.customer-table .el-table__fixed-right::before,
.el-table__fixed::before {
  width: 0;
}
.el-table--border th.gutter:last-of-type {
  border: 1px solid #ebeef5;
  border-left: none;
}
.grid-num {
  font-size: 20px;
  font-weight: bold;
}
.box-card1 {
  width: 1100px;
  margin: 10px 0px 10px 60px;
}
.el-row {
  margin-bottom: 20px;
}

.grid-content {
  display: flex;
  align-items: center;
  height: 100px;
}

.grid-cont-right {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: #999;
}

.grid-num {
  font-size: 25px;
  margin-top: 10px;
  font-weight: bold;
}

.grid-con-icon {
  font-size: 50px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  color: #fff;
}

.grid-con-1 .grid-num {
  color: rgb(26, 27, 27);
}

.grid-con-2 .grid-num {
  color: rgb(250, 236, 46);
}

.grid-con-3 .grid-num {
  color: rgb(35, 240, 79);
}

.grid-con-4 .grid-num {
  color: rgb(242, 94, 67);
}
.box-card2 {
  width: 1100px;
  margin: 10px 0px 10px 60px;
}
.list-text {
  margin-left: -40px;
}
li {
  margin: 5px 0px;
}
.button {
  float: right;
}
.button span {
  position: relative;
  top: -5px;
  left: -4px;
  transform: translate(50%, 50%);
}
</style>
